import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Badge, TabBar } from 'antd-mobile'
import { AppOutline, MessageOutline, MessageFill, UnorderedListOutline, UserOutline } from 'antd-mobile-icons'
const tabs = [
  {
    key: '/basic/home',
    title: '首页',
    icon: <AppOutline />,
    badge: Badge.dot,
  },
  {
    key: '/basic/classify',
    title: '分类',
    icon: <UnorderedListOutline />,
    badge: '5',
  },
  {
    key: '/basic/cart',
    title: '购物车',
    icon: (active: boolean) => (active ? <MessageFill /> : <MessageOutline />),
    badge: '99+',
  },
  {
    key: '/basic/mine',
    title: '个人中心',
    icon: <UserOutline />,
  },
  {
    key: '/basic/demo',
    title: 'demo演示',
    icon: <UserOutline />,
  },
]

const FooterBar = () => {
  const navigate = useNavigate()
  const [pathname, setPathName] = useState('/basic/home')
  const setRouteActive = (value: string) => {
    navigate(value, { replace: true })
    setPathName(value)
  }
  return (
    <TabBar activeKey={pathname} onChange={(value) => setRouteActive(value)}>
      {tabs.map((item) => (
        <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
      ))}
    </TabBar>
  )
}

export default FooterBar
